<template>
  <div class="dashboard-container">
    <div class="adminContent">
      <div class="butList">
        <div>审批管理</div>
        <div class="add" @click="addHander('add')"><span>+</span> 创建新审批 </div>
      </div>
      <div class="cont">
        <div class="itemCont" v-for="(item, index) in dataes" :key="item.id">
            <div class="contTit">{{typeTitle(item.groupType)}}</div>
            <div class="itemList">
              <div class="item" v-for="(it, ind) in item.definitionList">
                <div class="bod">
                  <img :src="it.icon" width="37" height="37" alt="">
                  <span> {{it.name}} </span>
                </div>
                <div class="foot">
                  <span @click="goFlow('/approvalFlow/table', it.id)">表单设计</span>
                  <span @click="goFlow('/approvalFlow/flow', it.id)">流程编辑</span>
                  <span @click="goFlow('/approvalFlow/base', it.id)">审批设置</span>
<!--                  <span @click="stopHandel">停用</span>-->
                </div>
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Cascader from './../../components/Cascader'
  import {mapGetters} from 'vuex'

  export default {
        name: 'Dashboard',
        data() {
            return {
                dataes:[],
                loading: '',
                pageCont:{
                    page: 1,
                    pageSize: 10
                }
            }
        },
        computed: {
            ...mapGetters([
                'flowId',
            ])
        },
        components:{
            Cascader
        },
        created(){
           this.init()
        },
        methods: {
            init(){
                const { page, pageSize } = this.pageCont
                this.$store.dispatch('approval/getApprovalAdminListAct', {page, pageSize}).then((res) => {
                    this.dataes = res
                    this.loading = false
                }).catch(() => {
                    this.loading = false
                })
            },
            async addHander(){
                await this.$store.dispatch('approval/setflowid', '')
                await this.$store.dispatch('approval/setflowdata', 'add')
                this.$router.push('/approvalFlow/base')
            },

            typeTitle(key){
                switch (key) {
                    case '1' :
                        return '出勤休假'
                        break
                    case '2' :
                        return '财务'
                        break
                    case '3':
                        return '人事'
                        break
                    case '4' :
                        return '行政'
                        break
                    case '5':
                        return '其他'
                        break
                }
            },
            stopHandel(){
                console.log(5678)
            },
            goFlow(url, id){
                this.$store.dispatch('approval/setflowid', id)
                this.$router.push(url)
            },
            getValue(val){
                this.ruleForm.participates = val.map(n => {
                    return {objectId: n.id, objectType: n.type}
                })
            },
            getValueUn(val){
                this.ruleForm.notParticipates = val.map(n => {
                    return {objectId: n.id, objectType: n.type}
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
  .dashboard {
    &-container {
      .adminContent {
        .title {
          text-align: center;
          padding: 0 15px;
          line-height: 40px;
          background: #eceffc;
        }
        .butList{
          padding: 0 20px;
          display: flex;
          justify-content: space-between;
          cursor: pointer;
          /*color: #3345ff;*/
          font-size: 16px;
          line-height: 50px;
          span{
            display: inline-block;
            position: relative;
            top:-1px;
            text-align: center;
            font-weight: bold;
            margin-right: 2px;
            color:#fff;
            background: #3345ff;
            line-height: 12px;
            height: 14px;
            width: 14px;
            border-radius: 100%;
          }
          .add{
            color: #3345ff;
          }
        }
        .cont {
          .itemCont{
            padding:0 20px;
            margin: 20px 0;
            .contTit{
              font-size: 14px;
              margin: 20px 0;
              &::before{
                content: ' ';
                display: inline-block;
                border-radius: 2px;
                width: 10px;
                height: 10px;
                margin-right:10px;
                background: #3345ff;
              }
            }
            .itemList{
              display: flex;
              flex-wrap: wrap;
              font-size: 14px;
              .item{
                background: #fff;
                width: 340px;
                margin-right: 15px;
                margin-bottom: 15px;
                border-radius: 3px;
                box-shadow: 0px 0px 4px #e8e9ec;
                .bod{
                  display: flex;
                  padding: 15px;
                  line-height: 37px;
                  img{
                    margin-right: 10px;
                  }
                }
                .foot{
                  display: flex;
                  border-top: solid 1px #e8e9ec;
                  padding:10px 0px;
                  color: #3345ff;
                  span{
                    display: inline-block;
                    text-align: center;
                    flex:1;
                    border-right: solid 1px #e8e9ec;
                    padding: 0 20px;
                    cursor: pointer;
                    &:last-child{
                      border-right: none;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
</style>
